<!-- 物流详情页面 -->
<template>
  <div class="container">
    <el-container style="background-color: white;height: 40rem;">
 
      <div style="margin-left: 1.3rem;">
        <div style="margin-left: 1rem;">
          <div>
            <div style="display: flex;color: rgba(52, 69, 99, 1); ">物流公司：<div style="margin-left: 15px;letter-spacing: 1px;">
                {{ postdata.logistics_company }}</div>
            </div>
            <div style="margin-top: 1rem; display: flex; color: rgba(52, 69, 99, 1);">快递编号：<div style="margin-left: 15px ;letter-spacing: 1px;">
                {{ postdata.logistics_number }}</div>
            </div>
          </div>
          <div style="display: flex;">
            <div style="margin-top: 1rem; color: rgba(52, 69, 99, 1);">物流信息：</div>
            <div style="margin-left: 15px; margin-top: 1.5rem;">
             <order-time-line></order-time-line>
            </div>
            <div>
              <el-button v-show="click" @click="change(false)" type="text" icon="el-icon-arrow-down"
                style="font-size: 20px; margin-left: 10rem;"></el-button>
              <el-button v-show="!click" type="text" @click="change(true)" icon="el-icon-arrow-up"
                style="font-size: 20px;margin-left: 10rem;">
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
import OrderTimeLine from './OrderTimeLine.vue';
export default {
  // 物流详情页面
  name: "LogisticsDetails",
  components: {
    OrderTimeLine,
  },
  data() {
    return {
      // 物流详情数据
      postdata: [],
      reverse: true,
      click: true,
      icon1: require("../../../assets/order/路径 .png"),
      icon2: require("../../../assets/order/￥.png"),
      icon3: require("../../../assets/order/收.png"),
    };
  },

  methods: {
    //绑定icon
    bindicon(icon) {
      console.log(icon);
      var icon5 = "";
      if (icon === "post") {
        icon5 = "el-icon-box";
      } else if (icon === "delivery") {
        icon5 = "el-icon-truck";
      } else {
        icon5 = "el-icon-document-checked";
      }
      return icon5;
    },
    //绑定颜色
    bindcolor(color) {
      if (color === "post") {
        return "rgba(191, 202, 222, 1)";
      } else if (color === "delivery") {
        return "rgba(191, 202, 222, 1)";
      } else {
        return "rgba(255, 87, 51, 1)";
      }
    },
    // 返回上一页
    goBack() {
      //   this.$router.go(-1);
      console.log("返回上一页");
    },
    // 获取物流详情数据
    getLogisticsDetails() {
      // 这里是假数据
      this.postdata = {
        logistics_company: "顺丰快递",
        logistics_number: "1234567890",
        sum: 7,
        records: [
          {
            type: "post",
            context: "寄件人: 张三",
            time: "2021-08-10 10:00:00",
          },
          {
            type: "delivery",
            context: "揽收人: 王五",
            time: "2021-08-10 08:00:00",
          },
          {
            type: "delivery",
            context: "湖南中转站",
            time: "2021-08-10 08:00:00",
          },
          {
            type: "delivery",
            context: "广东中转站",
            time: "2021-08-10 08:00:00",
          },
          {
            type: "delivery",
            context: "深圳中转站: 王五",
            time: "2021-08-10 08:00:00",
          },
          {
            type: "delivery",
            context: "菜鸟驿站",
            time: "2021-08-10 08:00:00",
          },
          {
            type: "sign",
            context: "签收人: 张三",
            time: "2021-08-10 10:00:00",
          },
        ],
      };
    },
    change(data) {
      this.click = data;
    },
  },

  created() {
    this.getLogisticsDetails();
  },

  mounted() { },

  computed: {},
};
</script>

<style scoped>
/* // 物流详情页面样式 */
/* 设置虚线样式 */

.el.timeline_item_ling   {
  border-left: 2px dashed #ccc;
}

.el-header {
  color: #333;
}

.el-container {
   width: 44rem;
    height: 100vh;
    background-color: rgba(247, 249, 250, 1);
}
/* // 时间线 */

  /* // 每一个item */

    /* //   线 */
    /deep/ .el-timeline-item__tail {
      border-left: 2px dashed rgba(167, 180, 204, 1);
      height: 100px;
    }
    /* // 圆点颜色 */
    /deep/ .el-timeline-item__node {
      background-color: rgb(72, 147, 255);
    }
    /* // 圆点大小与位置 */
    /deep/ .el-timeline-item__node--normal {
      left: -5px;
      width: 18px;
      height: 18px;
    }
    /* // 右边文字 */
 
      /* // 标题 */
      /deep/ .el-timeline-item__content {
        color: #00e9ea;
      }
      /* //   内容 */
      /deep/ .el-timeline-item__timestamp {
        color: #8393b0;
      }
    




</style>